<template>
    <div>
      <van-panel :title="title" v-if="contactInfo">
      <div class="tel">
        <ul v-for="(list,index) in contactInfo" :key="index">
          <li v-if="list.type==='text'">
            {{list.title}}
          </li>
          <li v-else>
            <img :src="list.src" :height="imgHeight">
          </li>
        </ul>
      </div>
      </van-panel>
    </div>
</template>

<script>
    export default {
        name: "contactUs",
      data(){
          return{
            imgHeight:0,
          }
      },
      props:{
        title:String,
        contactInfo:{
          type:Array,
        },
      },
      computed:{
        contactTitle:{
          get(){
            if(this.title!==undefined){
              return this.title;
            }
          },
          set(){}
        },
        info:{
          get(){
            if(this.contactInfo[0]!==undefined){
              return this.contactInfo[0];
            }else{
              let aa={
                src:'',
                title:''
              }
              return aa;
            }
          },
          set(){}
        }
      },
      methods:{
        getScreen:function(){
          this.imgHeight=document.body.clientWidth/3;
        },
      },
      mounted(){
        this.getScreen();
      }
    }
</script>

<style scoped>
  .van-panel{
    color:#000;
    text-align: left;
  }
  .van-cell{
    font-size:16px;
    font-weight: bold;
  }
  .tel{
    text-align: center;
  }
  .tel ul{
    list-style: none;
  }
  .tel ul li{

  }
  .tel ul li:first-child{
    padding-top:5px;
    padding-bottom:10px;
  }
  .tel ul li:last-child{
    font-size:14px;
    color:#999999;
    padding-bottom: 25px;
  }
  .van-cell:not(:last-child)::after{
    border:0 !important;
  }
</style>
<style>
  .van-cell:not(:last-child)::after{
    border:0 !important;
  }
</style>
